'use strict';
/*
 * @Author: FanWeiHua
 * @Date: 2020-09-23 12:50:46
 * @LastEditTime: 2021-07-29 10:10:48
 * @Description: rules 模块规则（配置 loader、解析器等选项）
 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
/**
 * webpack的自定义配置
 */
const webpackConfig = JSON.parse(process.env.webpackConfig);
module.exports = () => [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    exclude: /(node_modules|bower_components)/
  },
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /\.css$/i,
    use: [
      process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'local' ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          modules: false
        }
      }
    ]
  },
  {
    test: /\.less$/,
    use: [
      process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'local'
        ? 'vue-style-loader'
        : MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,
          modules: false
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => {
            const pluginArr = [
              require('postcss-flexbugs-fixes'),
              require('autoprefixer')({
                overrideBrowserslist: ['last 2 versions', '> 5%']
              })
            ];
            if (webpackConfig && webpackConfig.isViewport) {
              pluginArr.push(
                require('postcss-px-to-viewport')({
                  unitToConvert: 'px', // 需要转换的单位
                  viewportWidth: webpackConfig.viewportWidth, // 视口宽度，等同于设计稿宽度
                  unitPrecision: 5, // 精确到小数点后几位
                  /**
                   * 将会被转换的css属性列表，
                   * 设置为 * 表示全部，如：['*']
                   * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
                   * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
                   * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
                   * */
                  propList: ['*'],
                  viewportUnit: 'vw', // 需要转换成为的单位
                  fontViewportUnit: 'vw', // 需要转换称为的字体单位
                  /**
                   * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
                   * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
                   * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
                   */
                  selectorBlackList: ['black', 'body', 'html'],
                  minPixelValue: 1, // 最小的像素单位值
                  mediaQuery: false, // 是否转换媒体查询中设置的属性值
                  replace: true, // 替换包含vw的规则，而不是添加回退
                  /**
                   * 忽略一些文件，如'node_modules'
                   * 设置为正则表达式，将会忽略匹配该正则的所有文件
                   * 如果设置为数组，那么该数组内的元素都必须是正则表达式
                   */
                  exclude: [/node_modules/]
                })
              );
            }
            return pluginArr;
          }
        }
      },
      {
        loader: 'less-loader',
        options: {
          lessOptions: {
            javascriptEnabled: true
          }
        }
      }
    ]
  },
  {
    test: /\.(png|jpg|gif|svg|ico|gltf|glb|bmp)$/i, // i不区分大小写
    use: [
      {
        loader: 'url-loader', // url-loader(可进行构建配置)作用与file-loader相同 内部使用file-loader
        options: {
          limit: 1024,
          name: process.env.NODE_ENV === 'local' ? '[name].[ext]' : '[name]_[hash:8].[ext]',
          outputPath: './static/images'
        }
      }
    ]
  },
  // 字体 图标
  {
    test: /\.(ttf|eot|woff|woff2|otf)$/i,
    use: [
      {
        loader: 'url-loader', // url-loader(可进行构建配置)作用与file-loader相同 内部使用file-loader
        options: {
          limit: 1024,
          name: process.env.NODE_ENV === 'local' ? '[name].[ext]' : '[name]_[hash:8].[ext]',
          outputPath: './static/fonts'
        }
      }
    ]
  },
  // 数据
  {
    test: [/\.json$/i],
    exclude: /(node_modules|bower_components)/,
    use: [
      {
        loader: 'url-loader', // url-loader(可进行构建配置)作用与file-loader相同 内部使用file-loader
        options: {
          limit: 30720,
          name: process.env.NODE_ENV === 'local' ? '[name].[ext]' : '[name]_[hash:8].[ext]',
          outputPath: './static/data'
        }
      }
    ]
  }
];
